<template>
    <div class="car">
        <!-- <navback title="购物车" left-text="返回 <" :right-text="isedit ? '完成' : '编辑'" @clickright="isEdit"></navback> -->
        <van-nav-bar title="购物车" left-text="返回" left-arrow @click-left="onClickLeft" @click-right="isEdit" :right-text="isedit ? '完成' : '编辑'"   />
        <div class="car-item" v-for="item in carlist" :key="item[0].id">
            <div class="check">
                <van-checkbox v-model="item[0].isCheck" @click="selectOne" @change="sum"></van-checkbox>
            </div>
            <div class="content">
                <div class="img-box">
                    <img :src="item[0].Img" class="img-auto">
                </div>
                <div class="name-rule">
                    <div class="name">{{ item[0].name }}</div>
                    <div class="rule">{{ item[0].shuju[0] }}/{{ item[0].shuju[1] }}/{{ item[0].shuju[2] }}</div>
                </div>
                <div class="price">&yen;{{ item[0].price }}</div>
                <div class="stepper">
                    <van-stepper @change="change" v-model="item[0].count" theme="round" button-size="22" disable-input />
                </div>
            </div>
        </div>
        <div class="CarTips" v-if = "CarTips">
            <van-empty
            class="custom-image"
            image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
            description="快去选喜欢的饮品吧~"
            />
            <van-button round type="info" size="large" class="btn" color = "#e4393c" @click = onClickLeft>去点餐</van-button>
        </div>
        <div class="close">
            <div class="left">
                <van-submit-bar :price="totalPrice" button-text="提交订单" v-show="!isedit" @submit="toClose">
                    <van-checkbox v-model="allChecked" @click="checked">全选</van-checkbox>
                </van-submit-bar>
                <van-submit-bar :price="totalPrice" button-text="删除所选" v-show="isedit" @submit="removeSelect">
                    <van-checkbox v-model="allChecked" @click="checked">全选</van-checkbox>
                </van-submit-bar>
            </div>
            <div class="right"></div>
        </div>
    </div>
</template>

<script>
import { Toast } from "vant";
import navback from "../components/Navback.vue";
export default {
    name: "Car",
    components: {
        navback,
    },
    data() {
        return {
            carlist: [],

            allChecked: false,
            isedit: false,
            // checkList:[],
            totalPrice: 0,
            ids: [],
            CarTips:true
        };
    },
    created() {
        // this.CarTips = true
        // 处理数据,添加一个单选属性,否则不是响应式数据
        console.log(JSON.parse(localStorage.getItem("car")));
        if (JSON.parse(localStorage.getItem("car"))) {
            // 有购物车数据,不显示空状态
            this.CarTips = false
            JSON.parse(localStorage.getItem("car")).forEach((item, index) => {
                // console.log(item);
                // console.log(index);
                item.forEach((element) => {
                    // console.log(element);
                    element.isCheck = false;
                    // 添加一个数量
                    element.count = 0;
                    console.log(element);
                    // console.log(index);
                });
                console.log(item);
                this.carlist.push(item);
                console.log(this.carlist);
            });
            console.log(this.carlist);
        }
    },
    methods: {
        onClickLeft() {
            this.$router.push({
                name:"Menu"
            });
        },
        // 是否编辑
        isEdit() {
            this.isedit = !this.isedit;
        },
        // 跳转结算
        toClose() {
            let carlist = this.carlist
            if(carlist.length===0){
                Toast('购物车没有商品,请先选择商品')
                return

            }else{
            console.log(carlist);
            console.log(JSON.stringify(this.carlist))
            console.log(this.carlist);

            // this.carlist.forEach(item =>{
            //     console.log(item);
            // })
            this.$router.push({
                name: "Close",
                query:{ carlist: JSON.stringify(carlist) },
            });
            console.log(carlist.length);
            // 结算后商品清除
            localStorage.removeItem("car")
            }
        },
        // 全选
        checked() {
            // console.log(this.allChecked);
            // 当购物车中有商品,可全选
            if(this.carlist.length!==0){

                for (let i = 0; i < this.carlist.length; i++) {
                    this.carlist[i][0].isCheck = this.allChecked;
                    console.log(this.carlist[i][0]);
                }
            }else{
                Toast("没有商品,请先添加商品")
                return
            }

            this.sum();
        },
        // 单选
        selectOne() {
            for (let i = 0; i < this.carlist.length; i++) {
                if (!this.carlist[i][0].isCheck) {
                    this.allChecked = false;
                    return;
                }
            }
            this.allChecked = true;
        },
        // 删除所选
        removeSelect() {
            // 将选中的商品的ID取出
            if (this.carlist) {
                for (let i = 0; i < this.carlist.length; i++) {
                    if (this.carlist[i][0].isCheck) {
                        console.log(this.carlist[i][0].id);
                        this.ids.push(this.carlist[i][0].id);
                        console.log(this.ids);
                    }
                }
            }
            // 遍历选中的id数组
            this.ids.forEach((id) => {
                // 如果选中的id与商品id相同,就删除
                for (let i = 0; i < this.carlist.length; i++) {
                    if (id === this.carlist[i][0].id) {
                        this.carlist.splice(i, 1);
                        // 重新设置本地存储数据
                        localStorage.setItem('car',JSON.stringify(this.carlist))
                        break;
                    }
                }
            });
            console.log(this.carlist);
            // console.log(this.carlist);
            //    如果商品数据全部被删除了,全选按钮应该取消
            if (this.carlist.length === 0) {
                this.CarTips = true
                // Toast("没有商品,请先添加商品")
                this.allChecked = false;
                // 没有商品数据,清除本地存储的数据
                localStorage.removeItem('car')
                return;
            }
            this.sum()
            // localStorage.setItem('car',this.carlist)
            
            this.isedit = false
        },
        // 计算总价
        sum() {
            let totalPrice = 0;
            let totalcount = 0;
            for (let i = 0; i < this.carlist.length; i++) {
                if (this.carlist[i][0].isCheck) {
                    totalPrice += this.carlist[i][0].price * this.carlist[i][0].count * 100;
                    // 计算总数
                    totalcount += this.carlist[i][0].count;
                }
            }
            this.totalPrice = totalPrice;
            this.totalcount = totalcount;
            // console.log(totalPrice);

            // 把总价添加到carlist,方便提交给订单页面
            this.carlist[0][0].totalPrice = this.totalPrice;
            // 把总数添加到carlist,方便提交给订单页面
            this.carlist[0][0].totalcount = this.totalcount;
            console.log(this.carlist);
        },

        //    步进器改变时,计算总价
        change() {
            this.sum();
        },
    },
};
</script>

<style lang="less" scoped>
.car {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #faf4f4;
    /deep/ .van-nav-bar__title {
        color: #656565;
        font-size: 18px;
    }

    /deep/ .van-nav-bar__text{
        color: #656565;
    }
    /deep/ .van-icon-arrow-left{

        color: #656565;
    }
    .CarTips{
        .btn{
            width: 120px;
            height: 50px;
        margin: 20px 0 0 120px;

        }
        .bottom-button {
            width: 160px;
            height: 40px;
        }
    }
    .car-item {
        width: 100%;
        height: 60px;
        display: flex;
        .content {
            display: flex;
            .img-box{
                width: 50px;
                height: 50px;
                margin: 9px 0 0 9px;
                .img-auto{
                    width: 100%;
                    display: block;
                }
            }
            .name-rule {
                margin: 0 0 0 10px;
                width: 120px;
                height: 60px;
                .name {
                    margin: 15px 0 3px 0;
                    font-size: 16px;
                    font-weight: 700;
                }
            }

            .price {
                width: 60px;
                height: 1.6rem;
                margin: 0 0 0 4px;
                font-size: 0.42667rem;
                font-weight: 700;
                line-height: 60px;
            }
            .stepper {
                width: 100px;
                margin: 20px 0 0 -20px;
            }
        }
        .check {
            width: 22px;
            height: 22px;
            margin: 27px 0 0 20px;
        }
    }
    .close {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 60px;
        border-top: 1px solid rgb(179, 172, 172);
        display: flex;
        .left {
            width: 30%;
            height: 60px;
            background-color: pink;
            .van-submit-bar {
                height: 60px;
                padding-top: 1px;
                border-top: 1px solid #686969;
            }
        }
        .right {
            width: 70%;
            background-color: red;
        }
    }
}
</style>
